<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <head th:include="layout/main :: head" th:with="title='管理员维护'"></head>
    <!-- add your custom head elements below -->
    <link rel="stylesheet" href="/static/css/calendar.min.css" />
</head>

<body>
<!-- 引入顶部导航 -->
<div th:replace="layout/main :: header"></div>
<!-- 引入主菜单 -->
<div th:replace="layout/main :: #left-nav" th:with="menus=${left_nav_menus}"></div>
<!-- 编写网页内容 -->
<div class="pusher" id="general_container">
    <div class="segment">
        <div class="container">
            <!-- 编写视图内容 -->


            <!-- table start -->
            <div id="table_view_admin">
                <!-- table body -->
                <div>
                </div>
            </div>
            <!-- table end -->


            <input class="ui input" type="text" name="msg" id="ws_msg">
            <div class="ui button" id="ws_msg_btn">message</div>
            <div class="ui button" id="ws_msg_btn2" onclick="conn_ws();">message</div>
            <div class="ui button" id="ws_msg_btn3" onclick="test();">message</div>

        </div>
    </div>
</div>
<!-- 引入脚本 -->
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/js/semantic.min.js"></script>
<script src="/static/js/main.start.js"></script>

<script src="/static/js/calendar.min.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/tablebind.js"></script>

<script>
    //表格数据列配置
    var columns = [
            {
                label : '昵称',
                name : 'name',
                required : true,
                searchable : true,
                validate : [{type : 'empty', prompt : '昵称不可为空'}]
            },
            {
                label : '头像',
                name : 'avatar',
                type : 'image'
            },
            {
                label : '头像[多图]',
                name : 'avatars',
                type : 'images'
            },
            {
                label : '账号',
                name : 'account',
                required : true,
                searchable : true,
                updatable : false,
                validate : []
            },
            {
                label : '用户',
                name : 'userId',
                textName : 'userName',
                //textName : 'userId',
                type : 'reference',
                ref : {
                    url : '/data/user/list',
                    key : 'id',
                    cols : [
                        //{name : 'id', label : ''},
                        //{name : 'uuid', label : ''},
                        {name : 'name', label : '昵称'},
                        {name : 'account', label : '账号'},
                        {name : 'phone', label : '手机'},
                        {name : 'regIP', label : '注册IP'},
                        {name : 'createTime', label : '注册日期'}
                    ]
                }
            },

            {
                label : '邮箱',
                name : 'email',
                required : true,
                emptyIsNull : true
            },
            {
                label : '注册日期',
                name : 'date',
                writable : false,
                updatable : false,
                type : 'datetime'
            },
            {
                label : 'long textarea',
                name : 'lt',
                type : 'textarea'
            }
        ],
        //表格全局配置
        setting = {
            key : 'no',
            tableId : 'admin',
            dbClickEditable : true,
            dataUrl : '/user/system/list',
            addUrl : '/user/system/add',
            updateUrl : '/user/system/update',
            deleteUrl : '/user/system/delete1',
            autoLoad : true,
            lengthList : [5,10,20],
            enableImport : true,
            importUrl : '/user/system/import',
            importTemplateUrl : 'xxxx'
        };
        var opItems = [
            {url:'/user/system/list?page=1&size=5',method:'GET'},{},{confirmEnable:false}
        ];
    setting.customOpItems = opItems;
    //绑定到页面元素
    $('#table_view_admin').tablebind(columns, setting);

</script>

<script src="/static/js/sockjs.min.js"></script>
<script src="/static/js/stomp.min.js"></script>
<script>
    conn_ws();
    function conn_ws() {
        var websocket,
            addr=window.location.host;
        if ('WebSocket' in window) {
            console.info('Yep,websocket');
            websocket = new WebSocket('ws://'+addr+'/ws');
        } else if ('MozWebSocket' in window) {
            console.info('Ops,Moz webSocket');
            websocket = new MozWebSocket('ws://'+addr+'/ws');
        } else {
            console.info('Shit,JS webSocket');
            websocket = new SockJS('http://'+addr+'/sws');
        }

        websocket.onopen = function (evnt) {
            console.info('connected');
            console.info(evnt);
        };
        websocket.onmessage = function (evnt) {
            console.info('message');
            console.info(evnt);
            console.info(evnt.data);
        };
        websocket.onerror = function (evnt) {
            console.info('error');
            console.info(evnt);
        };
        websocket.onclose = function (evnt) {
            console.info('close');
            console.info(evnt);
        }
        $('#ws_msg_btn').on('click', function () {
            var msg = $('#ws_msg').val();
            websocket.send(msg);
        });
    }

</script>
<script>
</script>
</body>
</html>